import React from 'react';
import { Layout, Dropdown, Menu, Space } from 'antd';

import { NavLink, Outlet, useNavigate } from 'react-router-dom'
import '../style/Index.scss'
import { DownOutlined, UsergroupAddOutlined, IssuesCloseOutlined, SoundOutlined, EnvironmentOutlined, ExclamationOutlined, WalletOutlined, BranchesOutlined, UserAddOutlined, SettingOutlined, SmileOutlined } from '@ant-design/icons';
import zhanweilogo from "../assets/zhanweilogo.png"
import logo from "../assets/logo.png"
import Music from '../components/Music'
import { connect } from 'react-redux';
const { Header, Sider, Content } = Layout;
function Index(props) {
    var navigate = useNavigate();
    var handleClick = ({ key }) => {
        console.log(key)
        navigate(key);
    }
    var cleartoken = () => {
        localStorage.removeItem("token");
        localStorage.removeItem("userinfo");
    }
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <NavLink to="/index/personcenter">个人中心</NavLink>
                    ),
                },
                {
                    key: '2',
                    label: (
                        <NavLink to='/login' onClick={cleartoken}> 退出</NavLink>
                    ),
                    icon: <SmileOutlined />,
                },

            ]}
        />
    );

    return (
        <div className='index'>

            <Layout>
                <Header>
                    <div className="left">
                        {/* <i className='iconfont icon-xinwenfabuguanliyuanshenqingliucheng-06'></i> */}
                        <div className="img">
                            <img src={logo} alt="" />
                        </div>
                        <h4>校园疫情防护系统</h4>
                    </div>
                    <div className="right">
                        <Dropdown overlay={menu}>
                            <a onClick={(e) => e.preventDefault()}>
                                <Space>
                                    <img src={props.userinfo.avatar ? 'data:image/png;base64,' + props.userinfo.avatar : zhanweilogo} alt="" />
                                    <DownOutlined />
                                </Space>
                            </a>
                        </Dropdown>
                    </div>
                </Header>
                <Layout>
                    <Sider>
                        <Menu mode="inline" onClick={handleClick} defaultSelectedKeys={['/index/home']}>
                            <Menu.Item key="/index/home" style={{ paddingLeft: 60, boxSizing: 'border-box' }} >首页</Menu.Item>


                            <Menu.SubMenu key="2" title="权限管理" icon={<UserAddOutlined />}>

                                <Menu.Item key='/index/authoritymanage/listofroles' >
                                    角色列表
                                </Menu.Item>
                                <Menu.Item key='/index/authoritymanage/permissionlist' >
                                    权限列表
                                </Menu.Item>
                            </Menu.SubMenu>
                            <Menu.SubMenu key="3" title="学生管理" icon={<UsergroupAddOutlined />} >
                                <Menu.Item key='/index/studentmange/studentsinfo' >
                                    学生信息
                                </Menu.Item>
                                <Menu.Item key='/index/studentmange/studentsecharts'>
                                    学生信息图表
                                </Menu.Item>
                                <Menu.Item key='/index/studentmange/stu'>
                                    学生学习
                                </Menu.Item>
                            </Menu.SubMenu>

                            <Menu.SubMenu key="4" title="风险地区" icon={<BranchesOutlined />}>
                                <Menu.Item key='/index/areaofrisk' >
                                    地区信息
                                </Menu.Item>
                            </Menu.SubMenu>

                            <Menu.SubMenu key="5" title="行程管理" icon={<EnvironmentOutlined />} >
                                <Menu.Item key='/index/tripmanage' >
                                    行程信息
                                </Menu.Item>
                                <Menu.Item key='/index/schoolnumber'>
                                    校园疫情数据
                                </Menu.Item>


                            </Menu.SubMenu>

                            <Menu.SubMenu key="6" title="健康管理" icon={<IssuesCloseOutlined />}>
                                <Menu.Item key='/index/healthymange' >
                                    健康上报
                                </Menu.Item>

                            </Menu.SubMenu>
                            <Menu.SubMenu key="7" title="请假管理" icon={<WalletOutlined />}>
                                <Menu.Item key='/index/leavemanage' >
                                    请假信息
                                </Menu.Item>


                            </Menu.SubMenu>

                            <Menu.SubMenu key="8" title="疫情通告" icon={<SoundOutlined />}>
                                <Menu.Item key='/index/outbreak'>
                                    疫情通知
                                </Menu.Item>


                            </Menu.SubMenu>
                        </Menu></Sider>
                    <Content><Outlet /></Content>
                </Layout>
            </Layout>
            {/* <div className="music" style={{ width: 300, height: 300 }}>
                <Music />
            </div> */}

        </div>
    );
}

export default connect(
    (state) => {
        return {
            userinfo: state.userinfo
        }
    },
    (dispatch) => {
        return {

        }
    }
)(Index);